<template>
  <view v-if="info.album_id" class="by-play-bar padding-top-30 padding-bottom-24" :class="{ hide }">
    <view class="play-bar padding-left-16 flex-row align-center">
      <image class="watching-img block" :src="info.img" />

      <view class="margin-left-24 flex-column watching-info">
        <text class="text-28 color-white text-bold text-overflow-one">{{ info.name }}</text>
        <text class="text-20 color-white margin-top-4">上次看到第{{ info.playing?.sort }}集</text>
      </view>

      <view class="margin-left-14 flex-row align-center">
        <image src="/static/watching/play.png" class="operation block" @click="jump(`/pages/detail/detail?tt_album_id=${info.album_id}&tt_episode_id=${info.playing.episode_id}`)" />
        <image src="/static/watching/close.png" class="operation block margin-left-30" @click="hide = true" />
        <image src="/static/watching/right-arrow.png" class="operation arrow block" :class="{ show: hide }" @click="hide = false" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { jump } from '@/common/util'
import type { AnyObject } from '@/common/types'

interface IProps{
  info: AnyObject
}

withDefaults(defineProps<IProps>(), {
  info: () => ({})
})

const hide = ref(false)
</script>

<style scoped lang="scss">
@include setPadding(left, 16);

@include setMargin(top, 4);

.by-play-bar{
  @include position(fixed, $left: 0, $bottom: -6rpx, $z-index: 99);
  transition: left .3s ease-in-out;

  &.hide{
    left: -608rpx;
  }

  .play-bar{
    width: 648rpx;
    height: 112rpx;
    background: linear-gradient(91deg, #DFC59D 0%, #CDBCB7 100%);
    border-radius: 0 56rpx 56rpx 0;

    .watching-img{
      width: 108rpx;
      height: 142rpx;
      background: #D9D9D9;
      box-shadow: 0 4rpx 33rpx 0 rgba(0,0,0,0.22);
      border-radius: 12rpx;
      border: 1px solid #CDBCB7;
    }

    .watching-info{
      width: 316rpx;
    }

    .operation{
      width: 48rpx;
      height: 48rpx;
    }

    .arrow{
      @include position(absolute, $right: 0, $z-index: 2);
      opacity: 0;
      visibility: hidden;
      transition: all .3s ease-in-out;

      &.show{
        opacity: 1;
        visibility: visible;
      }

    }

  }

}
</style>
